<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新增产品</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
  <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
  <style type="text/css">

    .login-container {
      border-radius: 10px;
      margin: 0px auto;
      width: 550px;
      padding: 15px 10px 5px 15px;
      background: #fff;
      /*border: 1px solid #eaeaea;*/
      text-align: left;
      /*box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);*/
    }

    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: darkorange;
    }
    .el-form-item{
      margin-bottom: 10px;
    }
    #submit-button{
      background: #fff url("/button.png");
    }
  </style>
</head>
<body>
<div id="app">
  <el-form ref="shopForm" :model="product" class="login-container" label-position="left" enctype="multipart/form-data">
    <h1 class="title" >新增产品</h1>
    <el-form-item label="产品名称">
      <el-input type="text" style="width: 250px" v-model="product.name" placeholder="产品名称"></el-input>
    </el-form-item>
    <el-form-item label="选择商铺">
      <template>
        <el-select v-model="product.shopId" placeholder="请选择">
          <el-option
                  v-for="item in shopList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
          </el-option>
        </el-select>
      </template>
    </el-form-item>
    </el-form-item>
    <el-form-item label="定价">
      <el-input type="text" style="width: 50px" :rows="2" v-model="product.price" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="产品详情">
      <el-input type="textarea" style="width: 250px" :rows="2" v-model="product.detail" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="是否上架">
      <template>
        <el-radio v-model="product.status" label="1">上架</el-radio>
        <el-radio v-model="product.status" label="2">下架</el-radio>
      </template>
    </el-form-item>
    <el-form-item label="上传图片">
      <el-input v-if="false"></el-input>
      <el-upload
              class="upload-demo"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList"
              :on-change="onchange"
              :auto-upload="false"
              list-type="picture">
        <el-button size="small"  type="primary">选择文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1000kb</div>

      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button id="submit-button" @click="insert" style="width: 100%;">提交</el-button>
    </el-form-item>

  </el-form>
</div>
<script>
  new Vue({
    el: "#app"
    ,
    data() {
      return {
        product: {
          name: '',
          detail: '',
          shopId:'',
          imageUrl:'',
          price:'',
          status:''
        }
        ,
        shopList:[]
        ,
        fileList:[]
        ,
        formdata:{}
      }
    }
    ,
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
      ,
      onchange(file,fileList){
        if(fileList.length>1){
          fileList.splice(0,1)
        }
        this.product.imageUrl = file.raw
        console.log(this.product.imageUrl)
      }
      ,
      initCurrentShopId(){
        let _this=this;
        $.post("/shop/shopList",function (data){
          console.log(data);
          console.log(123);
          _this.shopList = data;
        })
      }
      ,
      insert(){
        // console.log(this.shopForm.name)
        let product = new FormData()
        product.append("name",this.product.name)
        product.append("price",this.product.price)
        product.append("shopId",this.product.shopId)
        product.append("detail",this.product.detail)
        product.append("status",this.product.status)
        product.append("imageUrl",this.product.imageUrl)
        this.formdata = product
        console.log(this.formdata)
        $.ajax({
          url:'/product/insertProduct',
          type:'post',
          data: product,
          processData: false, // 告诉jQuery不要去处理发送的数据
          contentType: false, // 告诉jQuery不要去设置Content-Type请求头
          success:function (data) {
            if(data==="ok") {
              alert("添加成功")
            }else {
              alert("添加失败")
            }
          }
        })
      }


    }
    ,
    created(){
      this.initCurrentShopId();
    }
  });
</script>
</body>
</html>